<template>
	<view @click="bodyClick" class="coverFull">
		<vs-nav-bar title="详情" fixed topHeight/>
		<view class="box">
			<view class="content">
				<view class="s-box">
					<vs-ratio-view ratio="5/3">
						<vs-swiper v-if="!info.videoPath"  :list="imgList" indicatorDots autoplay></vs-swiper>
						<video v-else class="coverFull" :poster="info.videoImgPath" :src="info.videoPath"></video>
					</vs-ratio-view>
					<view class="headw">
						<view class="v-top">
							<view class="left flex">
								<u-avatar  :size="80" :src="info.headImg"></u-avatar>
								<view class="l-1">
									<view class="l-1-name">{{info.creater||'***'}}</view>
									<view class="l-desc">{{$Time.timeIntervalToNow(new Date(info.createTime))}}</view>
								</view>
								
							</view>
							<view class="right flex middle ">
								<view class="item flex middle " @click="handleSetLoveInfo(info)">
									<vs-img-icon v-if="info.isUp>0" url="/static/img/xin.png" :size="20"></vs-img-icon>
									<vs-img-icon v-else url="/static/img/home_zan.png" :size="16"></vs-img-icon>
									<text class="r-t">{{info.goodNo}}</text>
								</view>
								<view class="item flex middle ">
									<vs-img-icon url="/static/img/home_ping.png" :size="16"></vs-img-icon>
									<text class="r-t">{{info.commentNo}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="combox">
						<comment-list @response="responseComment" :list="list"></comment-list>
					</view>
					<view>
						<comment-input loveShow :refId="info.id" type="照片墙" :isCollect.sync="info.isCollect" @send="saveComments" :focus="focus" :placeholder="placeholder" v-model="sendQuery.content"></comment-input>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCommentList,saveComment,setLoveInfo,cancelLoveInfo} from '@/api/homeapi'
	import commentList from '../../components/commentlist'
	import commentInput from '../../components/commentinput'
	export default{
		components:{commentList,commentInput},
		data(){
			return{
				info:{},
				list:[],
				imgList:[],
				focus:false,
				placeholder:'写评论',
				sendQuery:{
					content:'',
					type:'',
					pId:'',
					title:'',
					refCreaterId:'',
					refId:''
				}
			}
		},
		onLoad(){
			this.info = this.$Route.params.info
			this.imgList = this.info.picList.length>0?this.info.picList.map(v=> v.smallPic):''
			this.getList()
		},
		methods:{
			handleSetLoveInfo(e){
				if(e.isUp>0){
					cancelLoveInfo({id:e.id}).then(res=>{
						console.log(res);
						if(res.code==='1'){
							this.info.isUp= 0
							this.info.goodNo--
						}
					})
				}else{
					setLoveInfo({refId:e.id,type:'童趣'}).then(res=>{
						console.log(res);
						if(res.code==='1'){
							this.info.isUp= 1
							this.info.goodNo++
						}
					})
				}
			},
			responseComment(e){
				console.log(e);
			},
			getList(){
				getCommentList({refId:this.info.id}).then(res=>{
					// console.log(res);
					this.list = res.data
				})
			},
			saveComments(){
				// console.log(666);
				this.sendQuery.refId = this.info.id
				saveComment(this.sendQuery).then(res=>{
					// console.log(res);
					this.sendQuery.content=""
					this.getList()
				})
			},
			responseComment(e){
				console.log(e);
				this.focus = false
				setTimeout(()=>{
					this.focus = true
					this.sendQuery.pId = e.id
					this.placeholder = '回复@'+e.creater
				},100)
			},
			bodyClick(){
				this.focus = false
				this.placeholder = '写评论'
				this.sendQuery.pId = ''
				this.sendQuery.content = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.box{
		width: 100%;
		.content{
			width: 100%;
			
			.s-box{
				width: 100%;
				.headw{
					width: 90%;
					margin: 0 auto;
					.v-top{
						display: flex;
						justify-content: space-between;
						padding: 15px 0;
					
						.left{
							display: flex;
							align-items: center;
							
							.l-1{
								margin-left: 10px;
								.l-1-name{
									font-size: 14px;
									color: #363636;
									
								}
								.l-desc{
									font-size: 12px;
									color: #888;
									padding: 3px 0 0;
								
									
								}
							}
						}
						.right{
							width: 90px;
							justify-content: space-between;
							.item{
								flex: 1;
								display: flex;
								justify-content: flex-end;
							}
							.r-t{margin-left: 5px;}
							
						}
					}
				}
				.combox{
					height: 45vh;
					overflow-y: scroll;
					padding-bottom: 100px;
				}
			}
		}
	}
</style>
